<template>
  <div class="detaile">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
            <span>详情</span>
            <i class="iconfont iconzuojiantou" style="color: white;"></i>
        </div>
    <div class="content">
        <ul>
            <li v-if="data">
                <div v-html="data.villageNoticeDir" class="content_"></div>
                <div class="contentt_">
                    <img :src="data.villageUrl" alt="">
                </div>
            </li>
            <li v-else class="nodata">
                暂无内容
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "detaile",
  data() {
    return {
      data: {},
      url: "",
      arrayimg: [],
      arraytext: [],
      arr: true
    };
  },
  created() {
    this.getData();
  },
  computed: {},
  filters: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //判断长度
    Arr() {
      if (this.arrayimg.length > this.arraytext.length) {
        this.arr = true;
      } else {
        this.arr = false;
      }
    },
    getData() {
      if (!this.$route.query.idd) {
        this.$axios
          .post("/cct/thing/appById", {
            id: this.$route.query.id
          })
          .then(res => {
            console.log("村内事详情", res);
            if (res.data.code == 0) {
              this.data = res.data.data;
            }
          });
      } else {
        this.$axios
          .post("/cct/notice/appById", {
            id: this.$route.query.idd
          })
          .then(res => {
            console.log("村部通知详情", res);
            if (res.data.code == 0) {
              this.data = res.data.data;
            }
          });
      }
    },
    Ptext(i) {
      if (i && i.indexOf("<img src=") == -1) {
        return i;
      } else {
        if (!!i) {
          let sub = i.substring(
            i.indexOf("<img src="),
            "<img src=" + i.indexOf("<img src=").length
          );
          return sub;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.detaile {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  font-size: 0;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
  }
  .content {
    font-size: 0.26rem;
    margin-top: 0.2rem;
    background-color: #fff;
    padding: 0.4rem 0.3rem 0.4rem 0.4rem;
    box-sizing: border-box;
    ul {
      li {
        font-size: 0.26rem;
        // p:nth-child(1) {
        //   text-align: center;
        //   font-size: 0.28rem;
        //   color: #333;
        //   font-weight: bold;
        // }
        // p:nth-child(2) {
        //   display: flex;
        //   justify-content: space-between;
        //   padding: 0.1rem 0;
        //   box-sizing: border-box;
        //   color: #999;
        // }
        // p:nth-child(3) {
        //   color: #666;
        //   line-height: 0.3rem;
        //   // text-indent: 2em;
        //   margin-top: 0.1rem;
        //   white-space: normal;
        //   word-break: break-all;
        //   h1 {
        //     font-size: 0.24rem;
        //   }
        // }
        /deep/.content_ {
          max-width: 100% !important;
          > p {
            font-size: 0.32rem !important;
            img {
              width: 100%;
              max-width: 100% !important;
              border-radius: 0.2rem !important;
            }
          }

          //   & > p {
          //     width: 100% !important;
          //     color: red !important;
          //   }
          //   img {
          //     width: 100%;
          //     max-width: 100% !important;
          //     margin-top: 0.2rem;
          //     border-radius: 0.2rem !important;
          //   }
        }
        .contentt_ {
          width: 100%;
          max-width: 100%;
          img {
            width: 100%;
            max-width: 100%;
            border-radius: 0.2rem;
          }
        }
      }
      .nodata {
        font-size: 0.34rem;
        color: #999;
        text-align: center;
      }
    }
  }
}
</style>
